<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="form-item">
          <span class="title">订单编号</span>
          <el-input placeholder="请输入订单编号" v-model="param.tbOrder.orderNum"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title">手机号</span>
          <el-input placeholder="请输入手机号" v-model="param.tbOrder.receiverMobile"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title">商品</span>
          <el-cascader
            v-model="param.tbOrder.spuId"
            :props="props"
            :show-all-levels="false"
            :options="options"
            placeholder="请选择商品"
            style="width:100%"
          ></el-cascader>
          <!-- <el-select v-model="param.tbOrder.spuId" style="width:100%" placeholder="请选择商品">
            <el-option
              v-for="item in productOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select> -->
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item button-container">
          <el-button type="primary" @click="searchCustomer" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="param.tbOrder.status" @tab-click="handleClick">
      <el-tab-pane label="待支付订单" name="1"></el-tab-pane>
      <el-tab-pane label="待发货订单" name="2"></el-tab-pane>
      <el-tab-pane label="待收货订单" name="3"></el-tab-pane>
      <el-tab-pane label="已完成订单" name="4"></el-tab-pane>
      <el-tab-pane label="退款订单" name="7,8,9"></el-tab-pane>
      <el-tab-pane label="已关闭订单" name="5"></el-tab-pane>
      <!-- <el-tab-pane label="线下订单" name="10"></el-tab-pane> -->
    </el-tabs>
    <div class="table-body" v-loading="isLoading">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="orderNum" label="订单编号"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="spuTitle" label="购买商品">
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.orderdetailList"
              :key="item.id"
              style="    background: #f5f5f5;line-height: 32px;margin-bottom:5px;border-radius:4px;padding:0 5px"
            >{{item.title}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="productNum" label="商品数量">
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.orderdetailList"
              :key="item.id"
              style="    background: #f5f5f5;line-height: 32px;margin-bottom:5px;border-radius:4px;padding:0 5px"
            >{{item.num}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="totalPay" label="商品单价(元)">
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.orderdetailList"
              :key="item.id"
              style="    background: #f5f5f5;line-height: 32px;margin-bottom:5px;border-radius:4px;padding:0 5px"
            >{{item.productPrice}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="actualPrice" label="订单金额(元)"></el-table-column>
        <!-- <el-table-column prop="damondmoney" label="钻石抵扣金额"></el-table-column> -->
        <el-table-column prop="receiverMobile" label="电话"></el-table-column>
        <el-table-column prop="receiver" label="姓名"></el-table-column>
        <el-table-column prop="receiverState" label="地址"></el-table-column>
        <el-table-column
          prop="isRebate"
          label="是否分账"
          v-if="param.tbOrder.status ==4"
          :formatter="(row) => { return row.isRebate == 0 ? '未分账' : '已分账' }"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              @click="handleSendItem(scope.row)"
              v-show="param.tbOrder.status == 2 && isPermissionsBtn('order_send')"
              type="success"
              size="small"
            >发货</el-button>
            <!-- <el-button
              @click="handlePrintingItem(scope.row)"
              v-show="param.tbOrder.status == 2 && isPermissionsBtn('order_send')"
              type="text"
              size="small"
            >打印面单</el-button>-->
            <el-button
              @click="handleBackMoney(scope.row)"
              v-show="param.tbOrder.status == '7,8,9' && isPermissionsBtn('order_back')"
              type="warning"
              size="small"
            >退款</el-button>
            <el-button
              @click="handleToDetial(scope.row)"
              type="primary"
              v-if="isPermissionsBtn('order_detail')"
              size="small"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="currentPageChange"
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <el-dialog title="发货设置" :visible.sync="isSendSettingVisable" width="30%">
      <send-setting
        ref="sendRef"
        v-if="isSendSettingVisable"
        @submit="sendSubmit"
        @close="isSendSettingVisable = $event"
      />
    </el-dialog>
    <el-dialog :title="backTitle" :visible.sync="isBack" width="50%">
      <back-money ref="backRef" v-if="isBack" @submit="sendSubmit" @close="isBack = $event" />
    </el-dialog>
  </div>
</template>

<script>
import SendSetting from "./SendSetting";
import BackMoney from "./BackMoney";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      options: [],
      isLoading: false,
      isBack: false,
      backTitle: "提示",
      param: {
        tbOrder: {
          orderNum: "", // 订单编号
          receiverMobile: "", //手机号
          skuId: "", //商品id
          spuId: "",
          isOffline: "", //是否线下服务 1是 0否
          status: "1" //状态,1、未付款 2、已付款,未发货 3、已发货,未确认 4、交易成功5、交易关闭 6、已评价7、退货中 8、退货成功,9退货失败
        },
        queryRequest: {
          pageSize: 10,
          pageNum: 1
        }
      },
      isSendSettingVisable: false,
      productOptions: [],
      tableData: [],
      total: 1,
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { value, level } = node;

          if (level == 0) {
            const nodes = this.options.map(item => ({
              value: item.label,
              label: item.value,
              leaf: level >= 1
            }));

            this.$service.firstGoods().then(res => {
              console.log(res);
              let list = res.data;
              // this.options = res;
              let arr = [];
              list.forEach(item => {
                arr.push({
                  value: item.id,
                  label: item.name,

                  leaf: level >= 2
                });
              });
              resolve(arr);
              // console.log(res.obj);
            });
          } else if (level == 1) {
            this.$service.secondGoods(node.value).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.name,
                  leaf: level >= 2
                };
              });
              resolve(nodes);
            });
          } else if (level == 2) {
            var param = {
              tbSpu: {
                cid2: node.value
              }
            };
            this.$service.getCommodityCategory(param).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.title,
                  leaf: level >= 2
                };
              });
              resolve(nodes);
            });
          }
          // else if (level == 3) {
          //   this.$service.getSkus(node.value).then(res => {
          //     const nodes = res.data.map(item => {
          //       return {
          //         value: item.id,
          //         label: item.title,
          //         leaf: level >= 3
          //       };
          //     });
          //     resolve(nodes);
          //   });
          // }
          else {
            resolve([]);
          }
        }
      }
    };
  },
  computed: {
    ...mapGetters(["isPermissionsBtn"])
  },
  mounted() {
    this.initData();
    this.getGoodsList();
  },
  methods: {
    handlePrintingItem(e) {},
    currentPageChange(e) {
      this.param.queryRequest.pageNum = e;
      this.initData();
    },
    initData() {
      this.isLoading = true;
      var spuID ="";
      if(this.param.tbOrder.spuId.length >0){
        spuID =this.param.tbOrder.spuId[2];
      }
      var param ={
        tbOrder: {
          orderNum: this.param.tbOrder.orderNum, // 订单编号
          receiverMobile: this.param.tbOrder.receiverMobile, //手机号
          skuId: this.param.tbOrder.skuId, //商品id
          spuId: spuID,
          isOffline: this.param.tbOrder.isOffline, //是否线下服务 1是 0否
          status: this.param.tbOrder.status //状态,1、未付款 2、已付款,未发货 3、已发货,未确认 4、交易成功5、交易关闭 6、已评价7、退货中 8、退货成功,9退货失败
        },
        queryRequest: {
          pageSize: this.param.queryRequest.pageSize,
          pageNum: this.param.queryRequest.pageNum
        }
      };
      if (this.param.tbOrder.status == "7,8,9") {
        // delete this.param.tbOrder;
        // var postdata = this.param.queryRequest;
        this.$service.refundList(param).then(res => {
          console.log(res);
          this.isLoading = false;
          if (
            res.data.rows.length == 0 &&
            this.param.queryRequest.pageNum != 1
          ) {
            this.param.queryRequest.pageNum -= 1;
            this.initData();
          }
          for (let i = 0; i < res.data.rows.length; i++) {
            const element = res.data.rows[i];
            //element.damondmoney = element.damondNum / 50;
            element.totalPay = element.totalPay / 100;
          }
          this.tableData = res.data.rows || [];
          this.total = res.data.total || 0;
        });
      } else {
        this.$service.getOrderList(param).then(res => {
          console.log(res);
          this.isLoading = false;
          //console.log(res.data.rows);
          if (
            res.data.rows.length == 0 &&
            this.param.queryRequest.pageNum != 1
          ) {
            this.param.queryRequest.pageNum -= 1;
            this.initData();
          }
          for (let i = 0; i < res.data.rows.length; i++) {
            const element = res.data.rows[i];
            element.damondmoney = element.damondNum / 50;
            element.totalPay = element.totalPay / 100;
          }
          this.tableData = res.data.rows || [];
          this.total = res.data.total || 0;
        });
      }
    },
    getGoodsList() {
      let param = {
        tbSpu: {
          saleable: "1" // 0 下架，1 上架
        },
        queryRequest: {
          pageSize: 100,
          pageNum: 1
        }
      };
      this.$service.getGoodsList(param).then(res => {
        if (res.code == "00000") {
          this.productOptions = res.data.rows || [];
        }
      });
    },
    searchCustomer() {
      this.param.queryRequest.pageNum = 1;
      console.log(this.param);
      this.initData();
    },
    resetSearchCotnet() {
      //清空搜索条件
      this.param.tbOrder.orderNum = "";
      this.param.tbOrder.receiverMobile = "";
      this.param.tbOrder.skuId = "";
      this.param.tbOrder.spuId = "";
      // this.param.tbOrder.isOffline = "";
      // this.param.tbOrder.status = "1";
      this.param.queryRequest.pageNum = 1;
      this.initData();
    },
    handleClick(e) {
      //console.log(this.param.tbOrder.status);
      this.param.queryRequest.pageNum = 1;
      if (this.param.tbOrder.status == "10") {
        this.param.tbOrder.isOffline = 1;
      } else if (this.param.tbOrder.status == "4") {
        this.param.tbOrder.isOffline = "0";
      } else {
        this.param.tbOrder.isOffline = "";
      }
      this.initData();
    },
    //发货接口
    handleSendItem(e) {
      this.isSendSettingVisable = true;
      this.$nextTick(() => {
        this.$refs.sendRef.initData(e.id);
      });
    },
    handleSendItem(e) {
      this.isSendSettingVisable = true;
      this.$nextTick(() => {
        this.$refs.sendRef.initData(e.id);
      });
    },
    sendSubmit() {
      this.initData();
      this.isSendSettingVisable = false;
      this.isBack = false;
    },
    handleToDetial(e) {
      const { href } = this.$router.resolve({
        name: "OrderDetail",
        query: { orderId: e.id, status: this.param.tbOrder.status }
      });
      window.open(href, "_blank");
      // this.$router.push({
      //   path: "/orderDetail",
      //   query: { orderId: e.id, status: this.param.tbOrder.status }
      // });
    },
    handleBackMoney(row) {
      this.$service.getOrderDetailById({ orderId: row.id }).then(({ data }) => {
        if (!data) return;
        if (data.appStu == 0) {
          this.backTitle = "待审核退款";
        } else if (data.appStu == 1) {
          this.backTitle = "已同意退款&退款成功";
        } else if (data.appStu == 2) {
          this.backTitle = "已拒绝退款";
        }
        this.isBack = true;
        this.$nextTick(() => {
          this.$refs.backRef.initData(data);
        });
      });
    }
  },
  components: {
    "send-setting": SendSetting,
    "back-money": BackMoney
  }
};
</script>

    <style lang="scss" scoped>
.form-item {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    white-space: nowrap;
    min-width: 80px;
  }
  .el-input {
    flex: 1;
  }
}

.button-container {
  justify-content: flex-start;
}
.el-tabs {
  margin-top: 20px;
}
</style>